<template>
	<view 
		class="app-container" 
		:style="{ 
			backgroundColor: bgColor, 
			'--theme-color': theme,
			height: containerHeight
		}">
		<slot></slot>
	</view>
</template>

<script>
import { mapGetters } from "vuex"


export default {
	props: {
		bgColor: {
			type: String,
			default: "#F2F4F6"
			// default: "pink"
		},
		calcTabbar: {
			type: Boolean,
			default: false
		},
		value: {
			type: Number,
			default:0
		}
	},
	computed: {
		...mapGetters(['theme', "sysInfo"]),
		containerHeight(){
			const {
				windowHeight,
				windowBottom,
				windowTop,
				statusBarHeight,
				screenHeight
			} = this.sysInfo
			// uni-app 中以下组件的高度是固定的，不可修改：
			
			// 导航栏高度固定为 44px
			// tabBar 高度固定为 56px
			let finalHeight = screenHeight - statusBarHeight - 44
			if(this.calcTabbar){
				finalHeight -= 56
			}
			this.$emit("input", finalHeight)
			return `${finalHeight}px`;
		}
	},
	created(){
	},
	methods: {
	}
}
</script>

<style lang="scss" scoped>
.app-container{
	// height: 100vh;
	overflow-y: scroll;
}
</style>